<template>
	<view class="locat_main">
		<!-- <view class="search_box">
			<uni-easyinput class="search" type="text" placeholderStyle="font-size:28rpx;" @confirm="search"
				:inputBorder="false" @clear="clear" prefixIcon="search" @input="input" v-model="selectValue"
				placeholder="地点搜索"></uni-easyinput>
		</view> -->

		<map id="map" style="width: 100%; height: 50%" :latitude="myLatitude" :longitude="myLongitude"
			:circles="circles" :markers="markers" scale="17"></map>

		<view class="btn_word">
			<button type="primary" class="btn_bor" @click="onSubmit">确定</button>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {
		ref,
		reactive,
		nextTick, onMounted
	} from "vue"
	import _ from "lodash"
	import { onReachBottom, onPullDownRefresh, onUnload, onLaunch, onLoad, onHide } from '@dcloudio/uni-app'
	import apiOrder from "@/util/network_api/apiOrder.js"
	const workId = ref()
	const location = ref([])//[纬度，经度]     客户经纬度 112.570412, 37.894241
	const signRange = ref(0)//签到范围 米
	// 通过onLoad接收数据
	onLoad((e) => {
		getLocation()
		location.value = [Number(Number(e.location.split(',')[1]).toFixed(6)), Number(Number(e.location.split(',')[0]).toFixed(6))]
		circles.value[0].latitude = location.value[0]
		circles.value[0].longitude = location.value[1]
		markers.value[0].latitude = location.value[0]
		markers.value[0].longitude = location.value[1]
		circles.value[0].radius = e.signRange <= 0 ? 50 : e.signRange
		signRange.value = e.signRange <= 0 ? 50 : e.signRange
	})
	onUnload(() => {
		uni.hideLoading()
	})
	const onSubmit = () => {
		let s = getDistance(location.value, [myLatitude.value, myLongitude.value])
		if (s > signRange.value) {
			uni.showToast({
				title: '不在签到范围内!',
				icon: 'none'
			})
		}
	}
	const positionInfo = ref({
		address: ''
	})
	// 地图上圆形区域标识
	const circles = ref([
		{
			latitude: 0,//纬度
			longitude: 0,//经度
			color: '#69BFBE6A',//描边颜色
			fillColor: '#69BFBE6A',//范围颜色
			radius: 100,//半径
			strokeWidth: 2,//描边的宽度
		},
	])
	const myLatitude = ref(0)
	const myLongitude = ref(0)
	// 地图上气泡提示
	const markers : any = ref([
		{
			id: 1,
			latitude: 0,
			longitude: 0,
			width: 25,//标注图标宽度
			height: 25,//标注图标高度
			// iconPath: 'https://dianliu.oss-cn-hangzhou.aliyuncs.com/static/map/company.png',
			callout: {
				content: ' ',
				color: '#FFFFFF',//文字颜色
				fontSize: 20,//文字大小
				borderColor: '#69BFBE',//文字
				bgColor: '#69BFBE',//文字
				padding: 20,//文字
				borderRadius: 2,//文字
				textAlign: 'center',
			},
			label: {
				content: '客户位置',
				color: '#FFFFFF',//文字颜色
				fontSize: 20,//文字大小
				borderColor: '#69BFBE',//文字
				bgColor: '#69BFBE',//文字
				padding: 20,//文字
				borderRadius: 2,//文字
				textAlign: 'center',
			}
		},
		{
			id: 2,
			latitude: 0,
			longitude: 0,
			width: 25,//标注图标宽度
			height: 25,//标注图标高度
			// iconPath: 'https://dianliu.oss-cn-hangzhou.aliyuncs.com/static/map/company.png',
			label: {
				content: '当前位置',
				color: '#FFFFFF',//文字颜色
				fontSize: 20,//文字大小
				borderColor: '#69BFBE',//文字
				bgColor: '#69BFBE',//文字
				padding: 20,//文字
				borderRadius: 3,//文字
				display: 'ALWAYS',
				textAlign: 'center',
			}
		},
	])



	const getLocation = () => {
		uni.showLoading({
			title: '定位中'
		})
		uni.getLocation(({
			type: 'gcj02',
			geocode: true,
			isHighAccuracy: true,
			success: (res : any) => {

				myLongitude.value = res.longitude
				myLatitude.value = res.latitude
				markers.value[1].latitude = res.longitude
				markers.value[1].longitude = res.longitude
				// getaddress()
				uni.hideLoading()
			},
			fail: (res : any) => {
				uni.hideLoading()
			}
		}));
	}
	// 获取选择地址
	function getaddress() {
		uni.chooseLocation({
			success: function (res) {
				positionInfo.value.address = '选择的位置是：' + res.name
			}
		});
	}
	// 格式化经纬度
	const rad = (d : any) => {
		return (d * Math.PI) / 180.0
	}
	// 计算距离
	const getDistance = (point1 : any[], point2 : any[]) => {
		let [x1, y1] = point1
		let [x2, y2] = point2
		let Lat1 = rad(x1) // 纬度
		let Lat2 = rad(x2)
		let a = Lat1 - Lat2 //	两点纬度之差
		let b = rad(y1) - rad(y2) //	经度之差
		let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(Lat1) * Math.cos(Lat2) * Math.pow(Math.sin(b / 2), 2)))
		//	计算两点距离的公式
		s = s * 6378137.0 //	弧长等于弧度乘地球半径（半径为米）
		s = Math.round(s * 10000) / 10000 //	精确距离的数值
		return s
	}

	// 搜索
	const selectValue = ref('')
	const selectVo = ref({
		"name": "",//搜索关键词：仓库名称
		"limit": 0,
		"page": 1,
	})
	const clear = () => {
		selectValue.value = ''
		search()
	}
	const search = _.debounce(async () => {
		selectVo.value.name = selectValue.value
	}, 500)
	const input = (n) => {
		if (!n) {
			search()
		}
	}
</script>

<style lang="scss" scoped>
	.locat_main {
		background-color: #fafafa;
		/* #ifdef H5 */
		height: calc(100vh - 44px);
		/* #endif */
		/* #ifndef H5 */
		height: 100vh;
		/* #endif */
		position: relative;

		.search_box {
			display: flex;
			align-items: center;
			// width: 100%;
			padding: 24rpx;
			background-color: #fff;

			:deep(.uni-easyinput__content) {
				background-color: #f3f4f8 !important;
				border-radius: 50rpx;
			}

			.search {
				flex: 1;
				padding: 0 12rpx;
			}
		}

		.btn_word {
			padding: 24rpx 48rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 2;

			:deep(button:after) {
				border: none !important;
			}

			.btn_bor {
				width: 100%;
				font-size: 32rpx;
				border-radius: 50rpx;
				background-color: #007cff;
			}
		}
	}
</style>